<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <button>slideLeft</button>
    <button>slideRight</button>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
<script>
    // 在jQuery($)上 拓展自己的方法  => 静态方法和动态方法
    // 静态方法 => $自己用 类型 $.ajax
    // 动态方法 => 给构造函数 创建的  jquery对象中 $(ele).width()

    // $ 和 jQuery 是一样的 => 对构造函数进行了二次封装   
    // function $(seletor) {
    //     return new GetEle(seletor)
    // }

    // console.log(jQuery);
    // console.log(jQuery === $);

    console.log($);
    console.log($.fn); // jQuery.prototype

    // 动态属性和方法 =>  给jquery对象中 $(ele).width()


    /* $.fn.a = 1;
    $.fn.b = 2;

    // jQuery.prototype.randColor = function(){}
    $.fn.randBgColor = function () {
        // this -> 调用此方法的实例化对象 (jquery对象)
        this.each(function () {
            var colorStr = "#";
            for (var i = 0; i < 6; i++) {
                var num = Math.round(Math.random() * 16);
                var char = num.toString(16);
                colorStr += char;
            }
            $(this).css({ backgroundColor: colorStr })
        })

    }

    $.fn.slideLeft = function (speed = 300, callback) {
        // this -> 调用此方法的实例化对象 (jquery对象)
        this.each(function () {
            $(this).css({ overflow: "hidden" }).animate({ width: 0, padding: 0, margin: 0, opacity: 0 }, speed, function () {
                $(this).attr("style", "");
                $(this).hide();
                callback && callback();
            })
        })
    }

    $.fn.slideRight = function (speed = 300, callback) {
        // this -> 调用此方法的实例化对象 (jquery对象)
        this.each(function () {
            var _width = $(this).width();
            $(this).css({ overflow: "hidden", width: 0, padding: 0, margin: 0, opacity: 0 }).show().animate({ width: _width, padding: 0, margin: 0, opacity: 1 }, speed, function () {
                $(this).attr("style", "");
                callback && callback();
            })
        })
    } */

    $.fn.extend({
        a: 1,
        b: 2,
        randBgColor: function () {
            // this -> 调用此方法的实例化对象 (jquery对象)
            this.each(function () {
                var colorStr = "#";
                for (var i = 0; i < 6; i++) {
                    var num = Math.round(Math.random() * 15);
                    var char = num.toString(16);
                    colorStr += char;
                }
                $(this).css({ backgroundColor: colorStr })
            })
        },
        slideLeft: function (speed = 300, callback) {
            // this -> 调用此方法的实例化对象 (jquery对象)
            this.each(function () {
                if ($(this).is(":hidden")) return false;
                var curStyle = this.style.cssText;
                $(this).css({ overflow: "hidden" }).animate({ width: 0, padding: 0, margin: 0, opacity: 0 }, speed, function () {
                    $(this).attr("style", curStyle);
                    $(this).hide();
                    callback && callback();
                })
            })
        },
        slideRight: function (speed = 300, callback) {
            // this -> 调用此方法的实例化对象 (jquery对象)
            this.each(function () {
                var curStyle = this.style.cssText;
                var curWidth = $(this).is(":hidden") ? 0 : $(this).width();
                var endWidth = $(this).width();
                var curOpacity = $(this).is(":hidden") ? 0 : $(this).css("opacity");
                var endOpacity = 1;
                $(this).css({ overflow: "hidden", width: curWidth, padding: 0, margin: 0, opacity: curOpacity }).show().animate({ width: endWidth, padding: 0, margin: 0, opacity: endOpacity }, speed, function () {
                    $(this).attr("style", curStyle);
                    $(this).show();
                    callback && callback();
                })
            })
        }
    })

    console.log($(".box").a);
    console.log($(".box").b);
    $(".box").randBgColor();



    $("button").eq(0).click(function () {
        $(".box").slideLeft(500, function () {
            console.log("运动完毕");
        })
    })
    $("button").eq(1).click(function () {
        $(".box").slideRight(500, function () {
            console.log("运动完毕");
        })
    })
</script>

</html>